<!DOCTYPE   html>
<html   lang="en">
<base href="/FirstWeb/WebPages/chapter09/system/src/">
<head>
       <meta   charset="UTF-8">
       <meta   name="viewport"   content="width=device-width,   initial-scale=1.0">
       <title>修改用户信息</title>
       <!-- vue框架： 视图的双向绑定 -->
		<script type="text/javascript" src="js/vue-2.6.10.js"></script>
		<!--  axios: 进行异步请求（数据来源与网页脱离） -->
		<script type="text/javascript" src="js/axios.js"></script>
       <style>
           body  {
               font-family:  Arial,  sans-serif;
               background-color:  #f2f2f2;
           }

           h1  {
           		text-align:center;
               color:  #333eee;
               font-size:  2em;
               margin-bottom:  1em;
           }

           form  {
               width: 50%;
               margin:  0  auto;
               padding:  20px;
               background-color:  #fffeee;
               border-radius:  5px;
               box-shadow:  0  2px  5px  rgba(0,  0,  0,  0.1);
           }

           label  {
               display:  block;
               margin-bottom:  5px;
           }

           input,  select,  textarea  {
               width:  96%;
               padding:  10px;
               margin-bottom:  20px;
               border:  1px  solid  #ccc;
               border-radius:  3px;
           }
           input[type="radio"]  {
               margin-right:  10px;
               width:  20px;
               display: inline-block;
           }
           label{
           	display: inline-block;
           }
           

           button[type="submit"]  {
               width:  100%;
               padding:  10px;
               background-color:  #007bff;
               color:  #fff;
               border:  none;
               border-radius:  3px;
               cursor:  pointer;
           }

           button[type="submit"]:hover  {
               background-color:  #0056b3;
           }
       </style>
</head>
<body>
       
       <h1>修改表单</h1>
        <form action="/FirstWeb/updateUser.do" method="Post" id="app">
       	   <input type="hidden" v-model='user.id' name="id">
       	   <label for="username">用户名：</label>
           <input type="text" v-model="user.username" id="username" name="username" required><br>
			
			<label for="password">密码：</label>
           <input type="password" v-model="user.password" id="password" name="password" required><br>
			
            <label for="phone">电话号码：</label>
           <input type="phone" v-model="user.phone" id="phone" name="phone" required><br>
			
			<label for="email">邮箱：</label>
           <input type="email" v-model="user.email" id="email" name="email" required><br>
			
			<label for="QQ">QQ：</label>
           <input type="QQ" v-model="user.QQ" id="QQ" name="QQ" required><br>
			
			<label for="weixin">微信：</label>
           <input type="weixin" v-model="user.weixin" id="weixin" name="weixin" required><br>
			
			<label for="address">地址：</label>
           <input type="address" v-model="user.address" id="address" name="address" required><br>
			
           <label for="age">年龄：</label>
           <select id="age" name="age" required>
               <option value="18">18岁</option>
               <option value="19">19岁</option>
               <option value="20">20岁</option>
               <option value="21">21岁</option>
               <option value="22">22岁</option>
               <option value="23">23岁</option>
               <option value="24">24岁</option>
               <option value="25">25岁</option>
               <option value="26">26岁</option>
           </select><br><br>

           <label for="sex">性别：</label>
           <input type="radio" id="male" name="sex" value="male" required>
           <label for="male">男</label>
           &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
           <input type="radio" id="female" name="sex" value="female" required>
           <label for="female">女</label><br><br>

           <label for="remark">备注：</label>
           <textarea id="remark" name="remark" cols="30" rows="10" required></textarea><br><br>

           <input type="submit" style="background-color:rgb(50, 100, 150, 0.5);text-align:center;" value="更新">
       </form>
       <script type="text/javascript">
	       function parseUrlParams() {
	    	    var url = window.location.href;
	    	    var paramString = url.split('?')[1];
	    	    var paramPairs = paramString.split('&');
	    	    var params = {};
	
	    	    paramPairs.reduce(function(params, pair) {
	    	        var parts = pair.split('=');
	    	        var key = parts[0];
	    	        var value = decodeURIComponent(parts[1] || '');
	
	    	        if (params[key]) {
	    	            params[key].push(value);
	    	        } else {
	    	            params[key] = [value];
	    	        }
	
	    	        return params;
	    	    }, params);
	
	    	    return params;
	    	}     		
	       
	       let vue = new Vue({
				el: '#app',
				data:{
					user:{
						username: '',
						password: '',
						age: '',
						sex: '',
						QQ:'',
						weixin:'',
						email:'',
						phone:'',
						address:'',
						remake: '',
						id: ''
					}
				},
				created(){
					params = parseUrlParams();
					//url: 表示异步请求地址
					axios.get('/FirstWeb/selectUserById.do?id='+params.id[0]).then(
						function(res_obj){
							//使用获取的数据来给vue对象中的users数据赋值
							vue.user = res_obj.data; 
						}
					).catch(
						function(error_obj){
							alert("网络加载异常！！！");
						}
					)
				}
			});
	</script>
</body>
</html>